<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@ include file="config/config.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>琥珀时光影城</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/index.css" />

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/style.js" type="text/javascript" charset="utf-8"></script>

<style>
	#infoTable>tbody>tr>td{
		border-top:0px;
	}
</style>
<!--首页样式-->
</head>
<body>
	<!--头部导航-->
	<nav class="navbar navbar-default navbar-fixed-top nav-min-height">
		<div class="container">
			<div class="navbar-header nav-min-height">
				<a href="#" class="navbar-brand logo"><img src="images/logo.png"
					alt=""></a>
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#navbar-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse  nav-min-height"
				id="navbar-collapse">
				<ul class="nav navbar-nav navbar-right  nav-min-height">
					<li class="active"><a href="#"><span
							class="glyphicon glyphicon-home"></span> 首页</a></li>
					<li><a href="#reying"><span
							class="glyphicon glyphicon-fire"></span> 正在热映</a></li>
					<li><a href="#shangying"><span
							class="glyphicon glyphicon-eye-open"></span> 即将上映</a></li>
					<li><a href="<%=basePath%>ticketServlet?method=selectByUser&userId=${sessionScope.loginUser.userId}"><span
							class="glyphicon glyphicon-user"></span>
							${sessionScope.loginUser.userName}</a></li>
					<li><a href="login.jsp"
							title="退出当前用户">[注销]</a></li>
				</ul>
			</div>
		</div>
	</nav>

	<!--banner-->
	<div id="myCarousel" class="carousel slide">
		<!-- <ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol> -->
		<div class="carousel-inner">
			<div class="item active" style="background: #223240">
				<img src="images/slide4.jpg" alt=""
					style="width: 100%; height: 380px;">
			</div>
			<div class="item" style="background: #F5E4DC;">
				<img src="images/slide2.jpg" alt="" style="width: 100%; height: 380px;">
			</div>
			<div class="item" style="background: #DE2A2D;">
				<img src="images/slide3.jpg" alt="" style="width: 100%; height: 380px;">
			</div>
		</div>
		<a href="#myCarousel" data-slide="prev" class="carousel-control left">
			<span class="glyphicon glyphicon-chevron-left"></span>
		</a> <a href="#myCarousel" data-slide="next"
			class="carousel-control right"> <span
			class="glyphicon glyphicon-chevron-right"></span>
		</a>
	</div>

	<div class="container">
		<!--热映-->
		<h3 class="header border-radius" id="reying">全 城 热 映</h3>
		<div id="bannerCarousel" class="carousel">
			<div class="carousel-inner overflow">
				<div class="item active">
					<div class="row content" id="hotMovies">
						<%
							List<Movie> hotMovieList = (List<Movie>) request.getAttribute("hotMovies");
							for (int i = 0; i < hotMovieList.size(); i++) {
								Movie m = hotMovieList.get(i);
						%>
						<div class="col-md-3  col-sm-3 col-xs-3 picture">
							<a href="<%=basePath%>detailServlet?method=getMovieDetail&movieId=<%=m.getMovieId()%>"><img
								src="<%=basePath%>/upload/<%=m.getPoster()%>"
								alt="<%=m.getMovieName()%>"
								class="img-responsive img-rounded lara"
								style="width: 200px; height: 300px;"></a>
							<div class="film-info lara">
								<span class="film-name"> <%=m.getMovieName()%>
								</span> <a
									href="<%=basePath%>detailServlet?method=getMovieDetail&movieId=<%=m.getMovieId()%>"
									class="bought-ticket text-center pull-right">购票</a>
							</div>
						</div>
						<%
							}
						%>
					</div>
				</div>
				
			</div>
			<input type="hidden" value="1" id="bannerRecord">
			<a href="#bannerCarousel" data-slide="prev"
				class="carousel-control left" onclick="prev();"> <span
				class="glyphicon glyphicon-chevron-left"></span>
			</a>
			 <a href="#bannerCarousel" data-slide="next"
				class="carousel-control right" onClick="next();"> <span
				class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>

		<!--即将上映-->
		<h3 class="header header2 border-radius" id="shangying">即 将 上 映</h3>
		<div class="row content" style="max-height: 706px;">
			<%
				List<Movie> willMovieList = (List<Movie>) request.getAttribute("willMovies");
				for (int i = 0; i < willMovieList.size(); i++) {
					Movie w = willMovieList.get(i);
			%>
			<div class="col-md-2 col-sm-3 col-xs-3 pic">
				<!--即将上映信息-->
				<a href="#shangying"> <img src="<%=basePath%>/upload/<%=w.getPoster()%>"
					alt="<%=w.getMovieName()%>" class="img-responsive lara"
					style="width: 200px; height: 255px;">
					<p class="hide_info">
						<span>影名：<%=w.getMovieName()%></span> <span>导演：<%=w.getDirector()%></span>
						<span>主演：<%=w.getStarring()%></span> <span>语言：<%=w.getLanguage()%></span>
						<span>时长：<%=w.getDuration()%>分钟</span>
					</p>
				</a>
				<div class="coming_info">
					<a
						href="<%=basePath%>detailServlet?method=getMovieDetail&movieId=<%=w.getMovieId()%>">
						<span>上映时间</span> <span id="shangying_time"> <fmt:parseDate
								value="<%=w.getReleaseTime()%>" pattern="yyyy-MM-dd"
								var="receiveDate"></fmt:parseDate> <fmt:formatDate
								value="${receiveDate}" pattern="yyyy-MM-dd"></fmt:formatDate>
					</span>
					</a>
				</div>
			</div>
			<%
				}
			%>
		</div>
	</div>

	<!--回到顶部-->
	<div id="back-top" class="pull-right">Top</div>

	<!--底部-->
	<div class="container-fluid foot">
		<div class="footer"
			style="margin: 0 auto; color: white; text-align: center; padding-top: 15px;">
			<p>
				友情链接 : <a href="http://maoyan.com/">猫眼电影 </a>| <a
					href="https://dianying.taobao.com/">淘票票</a>
			</p>
			<p>琥珀时光影城</p>
		</div>
	</div>
	
</body>

<script>
$(function() {
	showHotMovies();
});
/**
 * 动态添加热映影片
 */
function showHotMovies() {
   var	div=$('#hotMovies').children();
   $.each(div,function(k,value){
	   if(k>4){
		   // display: none;
	      // 默认显示前面五张，后面的隐藏
		  value.style.display='none';
	   }
   });
	 
}
function prev(){
	var val=$('#bannerRecord').val();
	if(val>1){
		val=val-1;
		$('#bannerRecord').val(val);
	}
	showBanner();
}
function next(){
	var val=$('#bannerRecord').val();
	var length=$('#hotMovies').children().length;
	var size=length/5;
	

	if(val<size){
		val++;
	
		$('#bannerRecord').val(val);
	}
	showBanner();
}
function showBanner(){
	var val=$('#bannerRecord').val();
	//1 0-4  (1-1)*5 <= k  <(1*5)-1
	//2 5-9  (2-1)*5       2*5-1
	var	div=$('#hotMovies').children();
	$.each(div,function(k,value){
		  if((val-1)*5 <= k){
			   // display: none;
		      // 默认显示前面五张，后面的隐藏
		      if((val*5-1) >= k){
		    	  value.style.display='';
		    	  
		      }else{
		    	  value.style.display='none';
		      }
		  }else{
			  value.style.display='none';
		  }
	 });
}
</script>
</html>
